var that
// 默认数据
var datas = [
    {
        img: 'http://5b0988e595225.cdn.sohucs.com/images/20200308/a1898e5747bc497a8eb2e6065461049c.jpeg',
        top: 'GRACE',
        main: 'KELE',
        bottom: 'LOVE'
    },
    {
        img: 'https://img1.baidu.com/it/u=1724157493,2813978428&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800',
        top: 'CHERISH',
        main: 'SKY',
        bottom: 'SMILE'
    },
    {
        img: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farticle%2F46947b83f2a245a4fe6bb9e7f11ee0c585ea9fae.jpg&refer=http%3A%2F%2Fi0.hdslb.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1657887002&t=ab50c4f48aa4faaaf9fb65c3d7ea3cd8',
        top: 'FOREVER',
        main: 'KING',
        bottom: 'UNIQUE'
    },
    {
        img: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farticle%2Fcde565ff91a11e27ddc31416e4ccd53cb64cb8a2.jpg&refer=http%3A%2F%2Fi0.hdslb.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1657887103&t=047a02d3fb61b74f1e29cb824fb33c42',
        top: 'BELIEVE',
        main: 'XN',
        bottom: 'DESTINY'
    },
    {
        img: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farticle%2F1eb9a97c0a54e3204cffd48f21972580f65d2420.jpg&refer=http%3A%2F%2Fi0.hdslb.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1657887232&t=f05740d54f33a5eaae918464fdf44e53',
        top: 'FREEDOM',
        main: 'BLISS',
        bottom: 'MOMENT'
    },
]
export default class Poster {
    constructor(ele) {
        that = this
        this.ele = document.querySelector(ele)  // content 区
        this.drop = document.querySelector('.drop')  // 添加菜单
        this.addBtn = this.drop.querySelector('button')  // 添加按钮
        this.len = document.body.clientWidth / 2 // 窗口宽度---菜单
        this.init()
    }
    // 初始化
    init () {
        // 渲染数据
        this.render(datas)
        // 更新dom结构
        this.updata()
        // 添加菜单展示
        this.show()
        // 添加按钮点击事件
        this.addBtn.onclick = this.addPoster
    }
    // 渲染原始数据
    render (datas) {
        // 先清空 content
        this.ele.innerHTML = ''
        // 遍历数据添加 dom
        datas.forEach(data => {
            let div = `
                <div class="poster" style="background:url(${data.img}) no-repeat center center;background-size: auto 100%;">
                    <span class="above all">${data.top}</span>
                    <span class="theme">${data.main}</span>
                    <span class="below all">${data.bottom}</span>
                    <div class="del">X</div>
                </div>`
            // 因为是字符串模板，不能直接进行 appendchild，则使用 insertAdjacentHTML 的 beforeend 进行尾部添加
            this.ele.insertAdjacentHTML('beforeend', div)
        })
    }
    updata () {
        // 更新所有图片 content
        this.posters = this.ele.querySelectorAll('.poster')
        // 更新所有删除 btn
        this.delBtn = this.ele.querySelectorAll('.del')
        // 更新点击事件
        for (let i = 0; i < this.posters.length; i++) {
            this.posters[i].onclick = this.posterOpen
            this.delBtn[i].index = i
            this.delBtn[i].onclick = this.delPoster
        }
    }
    // 展开/关闭图片
    posterOpen () {
        // 判断当前点击图片是否处于展开状态，如果是，则反转，并返回
        const flag = [...this.classList].some(item => item === 'poster-open')
        if (flag) {
            this.querySelectorAll('.all').forEach(ele => {
                ele.classList.remove('font-transform')
            });
            this.querySelector('.theme').classList.remove('font-cubic')
            this.querySelector('.del').classList.remove('font-transform')
            this.classList.remove('poster-open')
            return
        }
        // 关闭所有图片
        that.clearOpen()
        // 为当前点击图片添加展开
        this.querySelectorAll('.all').forEach(ele => {
            ele.classList.add('font-transform')
        });
        this.querySelector('.theme').classList.add('font-cubic')
        this.classList.add('poster-open')
        this.querySelector('.del').classList.add('font-transform')
    }
    // 删除poster
    delPoster (e) {
        const { index } = this
        // 删除指定数据，并重新渲染
        datas.splice(index, 1)
        that.render(datas)
        // 数据更新渲染
        that.updata()
    }
    // 清除所有展开状态
    clearOpen () {
        for (let i = 0; i < this.posters.length; i++) {
            this.posters[i].classList.remove('poster-open')
            this.posters[i].querySelectorAll('.all').forEach(ele => {
                ele.classList.remove('font-transform')
            });
            this.posters[i].querySelector('.theme').classList.remove('font-cubic')
            this.posters[i].querySelector('.del').classList.remove('font-transform')
        }
    }
    // 显示添加菜单
    show () {
        // 监听窗口变化
        window.addEventListener('resize', () => {
            that.len = document.body.clientWidth / 2
        })
        // 监听指针是否在指定位置
        document.addEventListener('mousemove', (e) => {
            e = e || window.event
            const x = e.pageX
            const y = e.pageY
            // 是的话显示添加DOM，反之移除
            if (x > (this.len - 250) && x < (this.len + 250) && y > 0 && y < 250) {
                this.drop.classList.add('drop-trans')
            } else {
                this.drop.classList.remove('drop-trans')
            }
        })
    }
    // 添加DOM图片
    addPoster () {
        // 获取内容
        let img = document.querySelector('.img-address')
        let top = document.querySelector('.top-txt')
        let main = document.querySelector('.main-txt')
        let bottom = document.querySelector('.bottom-txt')
        // 判断内容不为空
        if (img.value != '' && top.value !== '' && main.value !== '' && bottom.value !== '') {
            // axios请求判断图片网址是否能访问
            // bug：有些地址处于跨域问题，暂未修复
            axios.get(img.value).then(res => {
                // 添加数据
                datas.push({
                    img: img.value,
                    top: top.value,
                    main: main.value,
                    bottom: bottom.value
                })
                // 数据渲染
                that.render(datas)
                // 重新获取dom
                that.init()
                img.value = top.value = main.value = bottom.value = ''
            }).catch(err => {
                // 访问出错提示
                alert('网址错误或跨域，请检查输入网址或更换网址')
                console.log(err + '网址错误')
                img.value = ''
            })

        } else {
            alert('请输入内容!')
        }
    }
}